<!DOCTYPE html>
<html>
<head>
    <title>Fig. 7.1</title>
</head>
<body>
    <canvas id="physicsCanvas" width="600" height="500"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;
        ctx.font = '20px sans-serif';

        // Define graph parameters
        const originX = 80;
        const originY = 400;
        const axisLengthX = 450;
        const axisLengthY = 350;
        const arrowSize = 10;

        // Draw Y-axis
        ctx.beginPath();
        ctx.moveTo(originX, originY);
        ctx.lineTo(originX, originY - axisLengthY);
        ctx.stroke();

        // Draw Y-axis arrowhead
        ctx.beginPath();
        ctx.moveTo(originX, originY - axisLengthY);
        ctx.lineTo(originX - arrowSize / 2, originY - axisLengthY + arrowSize);
        ctx.lineTo(originX + arrowSize / 2, originY - axisLengthY + arrowSize);
        ctx.closePath();
        ctx.fill();

        // Draw X-axis
        ctx.beginPath();
        ctx.moveTo(originX, originY);
        ctx.lineTo(originX + axisLengthX, originY);
        ctx.stroke();

        // Draw X-axis arrowhead
        ctx.beginPath();
        ctx.moveTo(originX + axisLengthX, originY);
        ctx.lineTo(originX + axisLengthX - arrowSize, originY - arrowSize / 2);
        ctx.lineTo(originX + axisLengthX - arrowSize, originY + arrowSize / 2);
        ctx.closePath();
        ctx.fill();

        // Draw labels
        ctx.font = '20px sans-serif';
        // Label '0' on y-axis
        ctx.textAlign = 'right';
        ctx.textBaseline = 'middle';
        ctx.fillText('0', originX - 10, originY);

        // Label '0' on x-axis
        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';
        ctx.fillText('0', originX, originY + 8);

        // Draw Caption
        ctx.font = 'bold 24px sans-serif';
        ctx.textAlign = 'center';
        ctx.fillText('Fig. 7.1', canvas.width / 2, originY + 60);

    </script>
</body>
</html>